<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器对象模型-历史记录对象(Browser Object Model - History Objects)</title>
  <!-- 
  在JavaScript的浏览器对象模型（BOM）中，History对象用于管理浏览器的会话历史记录。它允许开发者访问用户的历史记录，并提供一些方法来在历史记录中导航。
  1. History对象概述
  - History对象是window对象的一个属性，可以通过window.history访问。
  - 它包含用户在当前浏览器窗口或标签页中访问的页面的历史记录。

  2. History对象的属性
  - length：返回当前会话中的历史记录条目数。这个值表示用户在当前窗口或标签页中可以访问的历史记录的数量。
    console.log(window.history.length); // 输出历史记录条目的数量
    
  3. History对象的方法
  History对象提供了一些方法，用于在历史记录中进行导航：
  - back()：使浏览器返回到历史记录中的上一页，等同于用户点击浏览器的“后退”按钮。
    window.history.back(); // 返回到上一页
  - forward()：使浏览器前进到历史记录中的下一页，等同于用户点击浏览器的“前进”按钮。
    window.history.forward(); // 前进到下一页
  - go(delta)：根据指定的参数delta在历史记录中导航。delta可以是正数、负数或零：
    - 正数表示向前跳转的页面数。
    - 负数表示向后跳转的页面数。
    - 零表示重新加载当前页面。
    window.history.go(-1); // 返回到上一页
    window.history.go(1);  // 前进到下一页
    window.history.go(0);  // 重新加载当前页面

  4. 使用示例
  以下是一个简单的示例，展示如何使用History对象的方法：
  // 返回到上一页
  function goBack() {
      window.history.back();
  }
  // 前进到下一页
  function goForward() {
      window.history.forward();
  }
  // 重新加载当前页面
  function reloadPage() {
      window.history.go(0);
  }
   -->
</head>
<body>

  <p>前端路由的核心: 修改url, 但是页面不刷新</p>
  <p>1. 修改hash值</p>
  <p>2. 修改history</p>

  <button>修改history</button>
  <button onclick="goBack()">返回</button>
  <button onclick="goForward()">前进</button>
  <button onclick="reloadPage()">重新加载</button>

  <script>
    // 获取历史记录条目的数量
    console.log(history.length);

    // 返回到上一页
    function goBack() {
      history.back();
    }
    // 前进到下一页
    function goForward() {
      history.forward();
    }
    // 重新加载当前页面
    function reloadPage() {
      history.go(0);
    }

    document.querySelectorAll("button")[0].onclick = function () {
      history.pushState(null, "", "/newpage");
    }
  </script>
    
  </script>
  
</body>
</html>